<template>
	<div style="line-height: 50px;display: flex;">
		<div style="width: 200px;margin-left: 10px; font-weight: bold; color: dodgerblue">Howe科技后台管理系统</div>
		<div style="flex: 1"></div>
		<div class="right-info">
			<el-dropdown>
				<span class="el-dropdown-link">
					<el-icon :size="18" style="float: left;margin-right: 7px;">
						<avatar />
					</el-icon>
					{{getName()}}
					<el-icon class="el-icon--right">
						<arrow-down />
					</el-icon>
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item @click="SignOut">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</div>
</template>

<script>
	const {ElMessage} = require("element-plus");
	export default {
		
		
		methods: {
			
			getName(){
				// console.log(window.sessionStorage.getItem("user"))
				// JSON.parse(window.sessionStorage.getItem("user")).username
				return JSON.parse(window.sessionStorage.getItem("user")).name;
			},
			
			SignOut() {
				sessionStorage.clear()
				ElMessage({message: '用户退出登录',type: 'success',});
				this.$router.replace({
					path: '/'
				});
			},
		}
	}
</script>

<style scoped>
	.right-info {
		width: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 1.5%;
	}

	.right-info:hover {
		cursor: pointer;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Poppins', sans-serif;
	}
</style>
